<template>
    <!-- banner -->
    <div class="banner">
        <div class="container">
            <div class="Reservation1">Reservation</div>
            <div class="Reservation2">预订</div>
            <div class="Reservation3">Make your reservation</div>
            <div class="order">
                <div class="orderleft">
                    <div class="order-son">
                        登记
                        <div class="block">
                        <el-date-picker class="block" :disabled-date="todaytime" v-model="cometime" type="date"
                            placeholder="入住时间" size="default" />
                        </div>
                    </div>
                    <div class="order-son">
                        离店
                        <div class="block">
                            <el-date-picker :disabled-date="disabledDate" v-model="leavetime" type="date" placeholder="离店时间"
                                size="default" />
                        </div>
                    </div>
                    <div class="order-son">
                        人数
                        <el-select v-model="people" class="block" placeholder="人数" size="default">
                            <el-option v-for="item in peoplenum" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </div>
                </div>
                <div class="order-last">
                    <!-- 有优惠券吗？<br> -->
                    <el-button type="success">查询</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>

</script>
<style lang="scss" scoped>
.container {
    width: 1200px;
    margin: 0 auto;
}

// banner部分
.banner {
    border-top: 1px solid #fff;
    min-width: 1200px;
    margin: 0 auto;
    height: 340px;
    width: 100%;
    .Reservation1{
        text-align: center;
	padding-top: 30px;
	font-size: 50px;
	font-weight: 700;
	font-family:  Arial, sans-serif,"微软雅黑", Helvetica,;
}
.Reservation2{
	/* font-size: 50px; */
	text-align: center;
	font-weight: 700;
}
.Reservation3{
	margin-top: 30px;
	font-size: 28px;
	text-align: center;
	font-weight: 700;
}
    .order {
        margin: 50px auto;
        display: flex;
        justify-content: space-between;
        width: 700px;
        height: 120px;
        background-color: aliceblue;
        box-shadow: 0px 0px 10px 5px #ccc;
        border: 1px solid #bbb;

        .orderleft {
            display: flex;
            background-color: aliceblue;
            justify-content: space-between;
            width: 460px;
            padding: 20px;

            .order-son {
                flex: 1;
                margin: 10px 0 0 10px;
                display: flex;
                flex-direction: column;
                align-items: left;
                border-right: 1px solid #aaa;
                overflow: hidden;
                margin-top: 10px;
                .block {
                    margin-top: 10px;
                    width: 130px;
                }
            }

            :nth-child(3) {
                border-right: 0;
            }
        }

        .order-last {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 135px;
            background-color: rgb(217, 226, 228);

            button {
                width: 80px;
                background-color: rgb(125, 154, 21);
                border: 0;
            }
        }

    }
}
</style>